Ember.js একটি শক্তিশালী ফ্রেমওয়ার্ক যা পুনঃব্যবহারযোগ্য components তৈরি করতে সহায়ক। কম্পোনেন্টের মাধ্যমে UI উপাদানগুলিকে encapsulate এবং ম্যানেজ করা যায়। Yield এবং Block Syntax Ember কম্পোনেন্টগুলির জন্য একটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য, যা কম্পোনেন্টের মধ্যে dynamic content ইনজেক্ট করার জন্য ব্যবহৃত হয়। এটি কম্পোনেন্টে বাইরের কন্টেন্ট বা উপাদান সন্নিবেশ করাতে সাহায্য করে।
Yield কী?
Yield হল একটি Handlebars helper যা আপনাকে একটি কম্পোনেন্টের মধ্যে বাইরের কন্টেন্ট বা ব্লক পাস করতে দেয়। এটি মূলত Block Syntax এর একটি অংশ, যা কম্পোনেন্টের মধ্যে কাস্টম কন্টেন্ট অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়।
এটি ব্যবহার করার মাধ্যমে আপনি কম্পোনেন্টের মধ্যে ব্লক পাস করে সেই ব্লকের কন্টেন্টকে কম্পোনেন্টে রেন্ডার করতে পারেন।
Ember Components এবং Yield ব্যবহার
১. কম্পোনেন্টে Yield ব্যবহার করা
যখন আপনি একটি component তৈরি করেন, তখন আপনি yield কিওয়ার্ডটি ব্যবহার করে টেমপ্লেটে বাইরের কন্টেন্টকে কম্পোনেন্টের মধ্যে পাস করতে পারবেন।
Example: Simple Yield in Component
- কম্পোনেন্ট তৈরি করা
প্রথমে একটি কম্পোনেন্ট তৈরি করি:
ember generate component modal
এটি app/components/modal.js এবং app/templates/components/modal.hbs ফাইল তৈরি করবে।
- Modal কম্পোনেন্টের JavaScript ফাইল
// app/components/modal.js
import Component from '@glimmer/component';
export default class ModalComponent extends Component {
// আপনি এখানে অন্যান্য লজিকও রাখতে পারেন
}
- Modal কম্পোনেন্টের Template (Handlebars)
<!-- app/templates/components/modal.hbs -->
<div class="modal">
<div class="modal-content">
{{yield}} <!-- এখানে বাইরের কন্টেন্ট পাস করা হবে -->
</div>
</div>
এখানে {{yield}} ব্যবহার করা হয়েছে, যা মূল কম্পোনেন্টে বাইরের কন্টেন্ট ইনজেক্ট করবে।
২. কম্পোনেন্টে Yield ব্যবহার করে কন্টেন্ট পাস করা
এখন, আমরা modal কম্পোনেন্টটি parent template-এ ব্যবহার করে কাস্টম কন্টেন্ট পাস করতে পারি:
<!-- app/templates/application.hbs -->
<Modal>
<h1>Modal Title</h1>
<p>This is some content inside the modal!</p>
</Modal>
এখানে, ট্যাগের মধ্যে থাকা কন্টেন্টটি modal কম্পোনেন্টে yield হয়ে যাবে এবং modal.hbs টেমপ্লেটের মধ্যে রেন্ডার হবে।
Block Syntax
Block Syntax কম্পোনেন্টের ভিতরে ডাইনামিক কন্টেন্ট পাস করার একটি বিশেষ উপায়। এটি আপনাকে কম্পোনেন্টে একটি block পাস করার অনুমতি দেয়, যা একটি রেন্ডারিং কন্টেক্সট তৈরির জন্য ব্যবহৃত হয়।
Block Syntax ব্যবহার করার উদাহরণ
- Block-Style কম্পোনেন্ট তৈরি করা
// app/components/button.js
import Component from '@glimmer/component';
export default class ButtonComponent extends Component {}
- Button কম্পোনেন্টের Template (Handlebars)
<!-- app/templates/components/button.hbs -->
<button class="btn">
{{yield}} <!-- Here, the content passed to the component will be rendered -->
</button>
- Parent Template (block content passed to the Button component)
<!-- app/templates/application.hbs -->
<Button>
Click Me!
</Button>
এখানে, Click Me! কন্টেন্টটি Button কম্পোনেন্টে yield হবে এবং button.hbs টেমপ্লেটে রেন্ডার হবে।
উল্লেখযোগ্য বিষয়:
{{yield}}একটি placeholder হিসেবে কাজ করে যেখানে আপনি কম্পোনেন্টে পাস করা কন্টেন্ট রেন্ডার করতে পারেন।- Block Syntax তে, আপনি পুরো ব্লক কন্টেন্ট পাস করতে পারেন, যেমন পাঠ্য, ইমেজ বা অন্য কম্পোনেন্ট।
Yield এবং Block Syntax এর সুবিধা
- কাস্টম কন্টেন্ট পাস করা সহজ: আপনি কম্পোনেন্টের মধ্যে বাইরের কন্টেন্ট (যেমন টেক্সট বা অন্যান্য কম্পোনেন্ট) পাস করে ডাইনামিকভাবে কন্টেন্ট রেন্ডার করতে পারেন।
- Reusable Components: Yield এবং Block Syntax ব্যবহারের মাধ্যমে কম্পোনেন্টগুলো আরও পুনঃব্যবহারযোগ্য হয়, কারণ আপনি কন্টেন্ট বা UI উপাদানগুলিকে ব্লকের মাধ্যমে পাস করতে পারেন।
- সাধারণ এবং পরিষ্কার কোড: এটি আপনাকে আরো পরিষ্কার, সংক্ষিপ্ত এবং সংগঠিত কোড লেখার সুবিধা দেয়, যা কম্পোনেন্টের পুনঃব্যবহার এবং রক্ষণাবেক্ষণ সহজ করে।
Ember.js-এ Yield এবং Block Syntax কম্পোনেন্টের মধ্যে বাইরের কন্টেন্ট বা UI উপাদান পাস করার একটি শক্তিশালী পদ্ধতি। Yield কিওয়ার্ডটি ব্যবহার করে আপনি কম্পোনেন্টের মধ্যে বাইরের কন্টেন্ট ইনজেক্ট করতে পারেন, আর Block Syntax ব্যবহারের মাধ্যমে আপনি আরও ডাইনামিক কন্টেন্ট রেন্ডার করতে পারেন। এই বৈশিষ্ট্যগুলো আপনাকে আরও মডুলার, পুনঃব্যবহারযোগ্য এবং পরিষ্কার কোড তৈরি করতে সাহায্য করবে।
Read more
